<template>
    <div>
        <h2>Vuex 入门学习 </h2>
        <div v-if="data1.flag">
            <h2 >count --- {{count}} - {{count2}} - {{count3}} - {{count4}}</h2>
            <h2>city === {{city}}</h2>
            <h2>word1 --- {{word}}</h2>
            <h2>msg1 -- {{msg}}</h2>
            <h2>test --- {{data.test}}</h2>
            <h2>message -- {{message}}</h2>
        </div>
        <hr>
        <button @click="countAdd">countAdd </button>
        <button @click="countDesc">countDesc -1  </button>
        <button @click="changeCount(99)">changeCount  99  </button>

        <button @click='changeCity("想去深圳看雪...")'>changeCity</button>
        <button @click='changeWord("努力到每天晚上2点 熬夜搞Vue")'>修改 word </button>
        <p>
            <input type="text" :value="msg1" @input="changeMsg($event.target.value)">
        </p>
        <button @click="changeDataFlag(!data.flag)">切换flag </button>
        <button @click="changeDataTest('注意不要去人多的地方')">修改 data - test  </button>

    </div>
</template>


<script>
import store from '../store'
import {mapState} from "vuex"

export default {
    data(){
        return {
            count1:this.$store.state.count 
        }
    },
    computed:{
        ...mapState({ // state mapState从store 提供 
            count4:state=>state.count,
            count2:'count',  // 传字符串参数 'count' 等同于 `state => state.count`
            count3(state){
                return state.count+2000
            },
            city1:"city",
            word1:'word',
            msg1:"msg",
            data1:'data'
        }),
        ...mapState([
            'count',  // count =>state.count    this.count 
            'city',
            'msg',
            'word',
            'data',
            'message'
        ]),
        // 取值
        // count2(){
        //     return this.$store.state.count 
        // },
        // count3:{
        //     get(){
        //         return this.$store.state.count 
        //     }
        // },
        // count4:()=>store.state.count,
        // city1(){
        //     return this.$store.state.city 
        // },
        // word1(){
        //     return this.$store.state.word 
        // },
        // msg1(){
        //     return this.$store.state.msg 
        // },
        // data1(){
        //     return this.$store.state.data 
        // }
    },
    methods:{
        countAdd(){
            // commit(mutationType)
            this.$store.commit('countAdd')
        },
        countDesc(){
            this.$store.commit('countDesc')
        },
        changeCount(n){
            this.$store.commit('changeCount',n)
        },
        changeCity(city){
            this.$store.commit("changeCityOnce",city)
        },
        changeWord(word){
            this.$store.commit("changeWord",word)
        },
        changeMsg(msg){
            this.$store.commit('changeMsg',msg)
        },
        changeDataFlag(flag){
            this.$store.commit('changeDataFlag',flag)
        },
        changeDataTest(test){
            this.$store.commit('changeDataTest',test)
        }
    },
    mounted(){
        console.log(this.$store)
    }
}
</script>